<template>
	<div id="app">
		<div class="head">
			<div class="left-wrapper" @click="back">
				<img src="assets/dog.jpg" />
			</div>
			<div class="search-wrapper">
				<div>郑洪耕 资源导航</div>
			</div>
			<div class="right-wrapper">
			</div>
		</div>

		<div class="content">
			<div class="setting-group">
				<div class="setting-item" hover-class="view-hover" hover-stay-time="100" v-for="(item, index) in links" @click="tolink(item.url)">
					<!-- div class="setting-item-icon">
						<image :src="'/static/icon/setting/' + item.icon" mode="aspectFit"></image>
					</div -->
					<div class="setting-item-title not-icon">{{item.title}}</div>
					<div class="setting-right">
						>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 将业务逻辑暴露出去
export default {
	data () { //业务逻辑里面定义的数据
		return {
			links: [
				{title: "公司主页", url: "http://www.phplinux.cn/", icon: "home.png",},
				{title: "文档库", url: "http://doc.phplinux.cn:8099/", icon: "doc.png",},
			],
		}
	},
	methods: {
		tolink(url) {
			window.location = url;
		},
	},
}
</script>

<style lang="scss">
	#app {
		height: 100%;
		width: 100%;
		font-size: 38px;
	}

	.head {
		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44upx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88upx;
		// background-color: red;
	}

	.content {
		height: 1102px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		position: relative;
		padding-top: 121px;
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.setting-group {
		background: rgba(0, 0, 0, 0.05);
		padding-top: 28px;
	}

	.setting-group .setting-item {
		background: #ffffff;
		height: 82px;
		position: relative;
		padding: 49px 33px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-align-content: center;
		align-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.setting-group .setting-item:after {
		content: "";
		position: absolute;
		height: 1px;
		background: rgba(0, 0, 0, 0.1);
		width: 78%;
		right: 56px;
		bottom: 0;
	}

	.setting-group .setting-item .setting-item-title.not-icon {
		padding-left: 50px;
	}

	.setting-group .setting-item .setting-right {
		margin-right: 33px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-flex: 3;
		-webkit-flex: 3;
		flex: 3;
	}

	.left-wrapper {
		margin-left: 12px;
		height: 160px;
		line-height: 160px;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88upx;
		line-height: 88upx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24upx;
	}

	.search-wrapper {
		text-align: center;
		line-height: 104px;
		height: 104px;
		-webkit-box-flex: 10;
		-webkit-flex: 10;
		flex: 10;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-align-content: center;
		align-content: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
</style>
